<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 50px;
        }
    </style>
</head>

<body>

    <!-- 
        action=""  表单提交数据的地址(后端接口),如果不设置默认提交当前页  => 刷新当前页
        method="get/post"  数据提交的方式


     -->
    <form action="" method="get">
        <p>
            <label for="">用户名:</label>
            <input type="text" name="user" placeholder="请输入用户名" value="" >
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd" placeholder="请输入用户名" value="" >
        </p>
        <p>
            <span>性别:</span>
            <label><input type="radio" name="sex" value="secret" checked="checked">保密</label>
            <label><input type="radio" name="sex" value="man" >男</label>
            <label><input type="radio" name="sex" value="woman">女</label>
        </p>
        <p>
            <span>记住用户:</span>
            <label><input type="checkbox" name="isRem" checked="checked">是否记住用户名</label>
        </p>
        <p><span>出生年份</span>
            <select name="year" id="">
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003" selected="selected">2003</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
                <option value="2007">2007</option>
                <option value="2008">2008</option>
                <option value="2009">2009</option>
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                <option value="2022">2022</option>
                <option value="2023">2023</option>
            </select>
        </p>
        <p> 
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </form>
</body>
<script>
    var userInp = document.getElementsByName("user")[0];
    var pwdInp = document.getElementsByName("pwd")[0];
    var isRemInp = document.getElementsByName("isRem")[0];
    var yearSel = document.getElementsByName("year")[0];

    // onfocus  表单聚焦时触发
    // onblur   表单失焦时触发

    // userInp.onfocus = function(){
    //     console.log("输入框聚焦");
    // }

    // userInp.onblur = function(){
    //     console.log("输入框失焦");
    //     var user = userInp.value;
    //     if(user.length >=6 && user.length <= 12){
    //         console.log("ok");
    //     }else{
    //         console.log("用户名需要再6-12位之间!");
    //     }
    // }

    // onchange   输入框内容发生改变时触发
    // (1)  输入框内容改变 且 失焦时触发
    // (2)  输入框内容改变 => 点击回车(enter)键也会触发  => 此方式不建议在form表单中使用, enter也会触发表单提交,页面会跳转和刷新
    // (3)  用在下拉框 => 当下拉框选项切换时触发 
    // userInp.onchange = function(){
    //     // console.log("输入框内容改变");
    //     var user = userInp.value;
    //     if(user.length >=6 && user.length <= 12){
    //         console.log("ok");
    //     }else{
    //         console.log("用户名需要再6-12位之间!");
    //     }
    // }

    // yearSel.onchange = function(){
    //     var val = this.value;
    //     console.log("下拉框选项切换时触发",val);
    // }


    // oninput   输入框内容发生改变时触发 (内容发生改变之后立即触发  => 即时输入)
    // userInp.oninput = function(){
    //     var user = userInp.value;
    //     console.log("输入框内容改变",user);
    //     if(user.length >=6 && user.length <= 12){
    //         console.log("ok");
    //     }else{
    //         console.log("用户名需要再6-12位之间!");
    //     }
    // }


    // onsubmit  表单提交时触发  (注意:绑定给form元素,由提交按钮/enter触发)
    // onreset   表单重置时触发  (注意:绑定给form元素,由重置按钮r触发)

    var form = document.querySelector("form");


    form.onsubmit = function(){
        console.log("表单提交数据");

        return false; // 阻止浏览器默认行为(表单提交数据)
    }
    
    form.onreset = function(){
        console.log("表单重置数据");
        // return false; // 阻止浏览器默认行为(表单重置数据)
    }
    







</script>
</html>